<template>
	<view v-show="!isLoading" class="container" :style="appThemeStyle">
		<!-- 固定顶部导航栏 - 滚动时显示 -->
		<view class="sticky-tabs" :class="{ 'sticky-tabs-visible': showStickyTabs }">
			<view class="tab-item" :class="{ active: activeTab === 'company' }" @click="scrollToSection('company')">
				<text>商品信息</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'revenue' }" @click="scrollToSection('revenue')">
				<text>营收数据</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'info' }" @click="scrollToSection('info')">
				<text>基本信息</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'commitment' }"
				@click="scrollToSection('commitment')">
				<text>转让承诺</text>
			</view>
		</view>

		<!-- 商品名称部分 -->
		<view id="company-section" ref="companySection" class="section-container">

			<view class="company-card">
				<text class="company-name">深圳市**环保有限公司</text>

				<view class="price-row">
					<text class="price-label">转让价格：</text>
					<text class="price-value">¥5000000元</text>
				</view>

				<view class="publish-date">
					<text>发布时间：2024-12-03</text>
				</view>
			</view>
		</view>

		<!-- 营业收入部分 -->
		<view id="revenue-section" ref="revenueSection" class="section-container">
			<view class="section-header">
				<text class="section-title">营收数据</text>
			</view>

			<view class="revenue-grid">
				<view class="revenue-item">
					<text class="revenue-value">{{goods.total_operating_revenue}}</text>
					<text class="revenue-label">营业收入</text>
				</view>
				<view class="revenue-item">
					<text class="revenue-value">{{goods.total_tax_payment}}</text>
					<text class="revenue-label">纳税总额</text>
				</view>
				<view class="revenue-item">
					<text class="revenue-value">{{goods.net_cash_flow}}</text>
					<text class="revenue-label">现金流净额</text>
				</view>
				<view class="revenue-item">
					<text class="revenue-value">{{goods.revenue_growth_rate_yoy}}</text>
					<text class="revenue-label">增长率</text>
				</view>
			</view>
		</view>


		<!-- 基本信息部分 -->
		<view id="info-section" ref="infoSection" class="section-container">
			<view class="section-header">
				<text class="section-title">基本信息</text>
			</view>
			<view class="info-card">
				<view class="info-columns">
					<view class="info-column">
						<view class="info-row info-rows" v-for="(item, index) in ColumnInfo" :key="index">
							<text class="info-label">{{ item.label }}：</text>
							<text class="info-value">{{ item.value }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 转让承诺部分 -->
		<view id="commitment-section" ref="commitmentSection" class="section-container">
			<view class="section-header">
				<text class="section-title">转让承诺</text>
			</view>

			<!-- 可折叠部分 -->
			<view class="collapsible-card">
				<view class="collapsible-header" @click="toggleSection('transferCommitment')">
					<text class="collapsible-title">公司属性</text>
					<!-- <text class="collapsible-icon">{{ expandedSections.transferCommitment ? '∨' : '＞' }}</text> -->
					<i v-if="expandedSections.transferCommitment" class="collapsible-icon iconfont icon-xiangxiajiantou"></i>
					<i v-else class="collapsible-icon iconfont icon-xiangyoujiantou"></i>
				</view>
				<view class="collapsible-content" v-if="expandedSections.transferCommitment">
					<div class="active-content">
						<text class="commitment-item">企业名称：<text class="item-value">{{goods.goods_name}}</text></text>
						<text class="commitment-item">统一社会信用代码：<text class="item-value">{{goods.code}}</text></text>
						<text class="commitment-item">法定代表人：<text
								class="item-value">{{goods.legal_representative}}</text></text>
						<text class="commitment-item">登记状态：<text
								class="item-value">{{goods.registration_status}}</text></text>
						<text class="commitment-item">企业类型：<text class="item-value">{{goods.company_type}}</text></text>
						<text class="commitment-item">纳税人资质：<text
								class="item-value">{{goods.taxpayer_qualification}}</text></text>
						<text class="commitment-item">人员规模：<text class="item-value">{{goods.staff_size}}</text></text>
						<text class="commitment-item">参保人数：<text
								class="item-value">{{goods.social_insurance_count}}</text></text>
						<text class="commitment-item">成立日期：<text
								class="item-value">{{goods.established_date}}</text></text>
						<text class="commitment-item">核准日期：<text
								class="item-value">{{goods.approved_date}}</text></text>
						<text class="commitment-item">所属地区：<text
								class="item-value">{{goods.registered_region}}</text></text>
						<text class="commitment-item">登记机关：<text
								class="item-value">{{goods.registration_authority}}</text></text>
						<text class="commitment-item">注册地址：<text
								class="item-value">{{goods.registered_address}}</text></text>
						<text class="commitment-item">通信地址：<text
								class="item-value">{{goods.mailing_address}}</text></text>
					</div>

				</view>
			</view>

			<view class="collapsible-card">
				<view class="collapsible-header" @click="toggleSection('scope')">
					<text class="collapsible-title">经营范围</text>
					<!-- <text class="collapsible-icon">{{ expandedSections.scope ? '∨' : '＞' }}</text> -->
					<i v-if="expandedSections.scope" class="collapsible-icon iconfont icon-xiangxiajiantou"></i>
					<i v-else class="collapsible-icon iconfont icon-xiangyoujiantou"></i>
				</view>
				<view class="collapsible-content" v-if="expandedSections.scope">
					<view class="active-content">
						<view class="info-row info-content">
							<text class="info-label">{{goods.business_scope}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="collapsible-card">
				<view class="collapsible-header" @click="toggleSection('projectInfo')">
					<text class="collapsible-title">车牌情况</text>
					<!-- <text class="collapsible-icon">{{ expandedSections.projectInfo ? '∨' : '＞' }}</text> -->
					<i v-if="expandedSections.projectInfo" class="collapsible-icon iconfont icon-xiangxiajiantou"></i>
					<i v-else class="collapsible-icon iconfont icon-xiangyoujiantou"></i>
				</view>
				<view class="collapsible-content" v-if="expandedSections.projectInfo">
					<view class="active-content">
						<view class="info-row info-content">
							<text class="info-label">燃油车牌：<text
									class="item-value">{{goods.fuel_vehicle_license}}</text></text>
							<text class="info-label">电动车牌：<text
									class="item-value">{{goods.electric_vehicle_license}}</text></text>
						</view>
					</view>
				</view>
			</view>

			<view class="collapsible-card">
				<view class="collapsible-header" @click="toggleSection('evaluationInfo')">
					<text class="collapsible-title">近三年财务情况</text>
					<!-- <text class="collapsible-icon">{{ expandedSections.evaluationInfo ? '∨' : '＞' }}</text> -->
					<i v-if="expandedSections.evaluationInfo" class="collapsible-icon iconfont icon-xiangxiajiantou"></i>
					<i v-else class="collapsible-icon iconfont icon-xiangyoujiantou"></i>
				</view>
				<view class="collapsible-content" v-if="expandedSections.evaluationInfo">
					<view class="active-content">
						<view class="info-row">
							<text class="info-label">实际税负率(%)：<text
									class="item-value">{{goods.effective_tax_rate}}</text></text>
						</view>
						<view class="info-row">
							<text class="info-label">税收优惠/减免：<text
									class="item-value">{{goods.tax_incentives_and_reliefs}}</text></text>
						</view>
						<view class="info-row">
							<text class="info-label">滞纳金/罚款：<text
									class="item-value">{{goods.late_payment_penalties}}</text></text>
						</view>
					</view>

				</view>
			</view>
			<view class="collapsible-card">
				<view class="collapsible-header" @click="toggleSection('property')">
					<text class="collapsible-title">资质/知识产权</text>
					<!-- // <text class="collapsible-icon">{{ expandedSections.property ? '∨' : '＞' }}</text> -->
					<i v-if="expandedSections.property" class="collapsible-icon iconfont icon-xiangxiajiantou"></i>
					<i v-else class="collapsible-icon iconfont icon-xiangyoujiantou"></i>

				</view>
				<view class="collapsible-content" v-if="expandedSections.property">
					<view class="active-content">
						<view class="info-row info-content">
							<text class="info-label">资质状况：<text
									class="item-value">{{goods.qualification_status}}</text></text>
							<text class="info-label">知识产权：<text
									class="item-value">{{goods.intellectual_property_rights}}</text></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部固定操作栏 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<view class="footer-btn-group">
					<view class="footer-btn contact-btn" @click="onDetail">
						<text>在线咨询</text>
					</view>
					<!-- <view class="footer-btn main-btn" @click="onShowContactPopup">
						<text>立即购买</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 联系卖家弹窗 -->
		<u-popup v-model="showContactPopup" mode="bottom" :closeable="true" :border-radius="26">
			<view class="contact-popup">
				<view class="contact-header">
					<text class="contact-title">联系卖家</text>
				</view>
				<view class="contact-content">
					<view class="contact-item" @click="makePhoneCall">
						<text class="contact-icon iconfont icon-phone"></text>
						<text class="contact-text">电话联系</text>
					</view>
					<view class="contact-item" @click="copyWechat">
						<text class="contact-icon iconfont icon-wechat"></text>
						<text class="contact-text">复制微信号</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	import {
		GoodsTypeEnum
	} from '@/common/enum/goods'
	import {
		getSceneData
	} from '@/core/app'
	export default {
		data() {
			return {
				isLoading: false,
				showStickyTabs: false,
				activeTab: 'company',
				sectionOffsets: {
					company: 0,
					revenue: 0,
					info: 0,
					commitment: 0
				},
				showContactPopup: false,
				expandedSections: {
					transferCommitment: false,
					projectInfo: false,
					targetCompanyInfo: false,
					property: false
				},
				ColumnInfo: [{
						label: '注册资本',
						value: '1000万以上'
					},
					{
						label: '经营时间',
						value: '2 - 3年'
					},
					{
						label: '企业区域',
						value: '广东 深圳'
					},
					{
						label: '员工数量',
						value: '50 - 100人'
					},
					{
						label: '年营业额',
						value: '5000万 - 1亿'
					},
					{
						label: '经营范围',
						value: '环保相关业务'
					},
				],
				revenueData: [{
					label: '营业收入',
					value: '5932万/年'
				}, {
					label: '净利润',
					value: '731万/年'
				}, {
					label: '公司资产',
					value: '1000万'
				}, {
					label: '注册资金',
					value: '500万'
				}],
				goods: {},
				goodsId: null,
			}
		},
		async onLoad(options) {
			// 记录query参数
			this.onRecordQuery(options)
		},
		methods: {
			onDetail() {
				uni.navigateTo({
					url: 'components/ReviewPopup?goodsId=' + this.goodsId, // 确保路径正确
				});
			},
			// 记录query参数
			onRecordQuery(query) {
				const scene = getSceneData(query)
				this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
			},
			// 获取商品信息
			getGoodsDetail() {
				const app = this
				return new Promise((resolve, reject) => {
					GoodsApi.detail(app.goodsId)
						.then(result => {
							app.goods = result.data.detail
							if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
								app.isEnableCart = true
							}
							resolve(result)
						})
						.catch(reject)
				})
			},
			toggleSection(section) {
				this.expandedSections = {
					...this.expandedSections,
					[section]: !this.expandedSections[section]
				};
			},
			onShowContactPopup() {
				this.showContactPopup = true;
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '13800000000'
				});
			},
			copyWechat() {
				uni.setClipboardData({
					data: 'zhangsan123',
					success: () => {
						uni.showToast({
							title: '微信号已复制',
							icon: 'success'
						});
					}
				});
			},
			handlePurchase() {
				uni.showToast({
					title: '购买功能开发中',
					icon: 'none'
				});
			},
			scrollToSection(section) {
				let selector = '';
				switch (section) {
					case 'company':
						selector = '#company-section';
						break;
					case 'revenue':
						selector = '#revenue-section';
						break;
					case 'info':
						selector = '#info-section';
						break;
					case 'commitment':
						selector = '#commitment-section';
						break;
				}

				if (selector) {
					uni.createSelectorQuery().select(selector).boundingClientRect(rect => {
						uni.pageScrollTo({
							scrollTop: rect.top - 50,
							duration: 300
						});
					}).exec();
				}
			},
			onPageScroll(e) {
				this.showStickyTabs = e.scrollTop > 100;
				this.updateActiveTab(e.scrollTop);
			},
			updateActiveTab(scrollTop) {
				const offsets = this.sectionOffsets;
				const scrollPosition = scrollTop + 100;

				if (scrollPosition >= (offsets.commitment || 0)) {
					this.activeTab = 'commitment';
				} else if (scrollPosition >= (offsets.info || 0)) {
					this.activeTab = 'info';
				} else if (scrollPosition >= (offsets.revenue || 0)) {
					this.activeTab = 'revenue';
				} else {
					this.activeTab = 'company';
				}
			},
			calculateSectionOffsets() {
				const query = uni.createSelectorQuery().in(this);

				['#company-section', '#revenue-section', '#info-section', '#commitment-section'].forEach((selector,
					index) => {
					query.select(selector).boundingClientRect(rect => {
						if (rect) {
							this.sectionOffsets[Object.keys(this.sectionOffsets)[index]] = rect
								.top;
						}
					});
				});

				query.exec();
			}
		},
		mounted() {
			this.calculateSectionOffsets();
			this.getGoodsDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 120rpx;
		background-color: #f5f5f5;
	}

	/* 固定顶部导航栏 */
	.sticky-tabs {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
		transform: translateY(-100%);
		transition: transform 0.3s ease;

		&.sticky-tabs-visible {
			transform: translateY(0);
		}

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #ff4d4f;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #ff4d4f;
					border-radius: 2rpx;
				}
			}
		}
	}

	/* 各部分通用样式 */
	.section-container {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.section-header {
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}
	}

	/* 商品信息部分 */
	.company-card {
		padding: 30rpx;

		.company-name {
			display: block;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.license-type {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.price-row {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.price-label {
				font-size: 24rpx;
				color: #666;
			}

			.price-value {
				font-size: 24rpx;
				color: #ff4d4f;
				font-weight: bold;
			}
		}

		.publish-date {
			font-size: 20rpx;
			color: #999;
		}
	}

	/* 营收数据部分 */
	.revenue-grid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;

		.revenue-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 25%;
			/* 每个 item 占据 25% 的宽度 */

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 1px;
				background-color: #ddd;
				/* 半根竖线的颜色 */
			}

			.revenue-value {
				font-size: 24rpx;
				/* 调整字体大小 */
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.revenue-label {
				font-size: 20rpx;
				/* 调整字体大小 */
				color: #999;
			}
		}
	}


	.info-card {
		padding: 30rpx;
	}

	.info-columns {
		display: flex;
		justify-content: space-between;
	}

	.info-column {
		flex: 1;
		margin-right: 20rpx;
		display: flex;
		flex-wrap: wrap;

		&:last-child {
			margin-right: 0;
		}
	}

	.info-rows {
		display: flex;
		width: 50%;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.info-label {
			font-size: 24rpx;
			color: #8a98a2;
		}

		.info-value {
			flex: 1;
			font-size: 24rpx;
			color: #333;
		}
	}

	/* 转让承诺部分 - 可折叠卡片 */
	.collapsible-card {
		border-radius: 12rpx;
		overflow: hidden;

		&:last-child {
			margin-bottom: 0;
		}

		.collapsible-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 26rpx;
			background-color: #fff;
			border-bottom: 1px dashed #dedee0;

			.collapsible-title {
				font-size: 24rpx;
				color: #333;
			}

			.collapsible-icon {
				font-size: 26rpx;
				color: #999;
			}
		}

		.collapsible-content {
			padding: 30rpx 30rpx 0 30rpx;
			background-color: #fff;
			border-top: 1rpx solid #f0f0f0;
			padding-bottom: 20rpx;

			.commitment-item {
				display: block;
				font-size: 23rpx;
				color: #999;
				line-height: 2.5;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.info-row {
				display: flex;
				color: #999;
				line-height: 2.5;

				.info-label {
					// width: 220rpx;
					font-size: 24rpx;
				}

				.info-value {
					flex: 1;
					font-size: 24rpx;
				}
			}

			.info-text {
				display: block;
				font-size: 24rpx;
				color: #999;
				line-height: 1.6;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	/* 底部固定操作栏 */
	.footer-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;

		.footer-container {
			padding: 20rpx 30rpx;
		}

		.footer-btn-group {
			display: flex;
			justify-content: space-between;
		}

		.footer-btn {
			flex: 1;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-weight: bold;

			&.contact-btn {
				background-color: #ff9500;
				color: #fff;
				margin-right: 20rpx;
			}

			&.main-btn {
				background-color: #ff4d4f;
				color: #fff;
			}
		}
	}

	/* 联系卖家弹窗 */
	.contact-popup {
		padding: 40rpx;

		.contact-header {
			text-align: center;
			margin-bottom: 40rpx;

			.contact-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.contact-content {
			display: flex;
			justify-content: space-around;
		}

		.contact-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx;
			width: 40%;
			border: 1rpx solid #eee;
			border-radius: 8rpx;

			.contact-icon {
				font-size: 48rpx;
				margin-bottom: 20rpx;
				color: #ff4d4f;
			}

			.contact-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.active-content {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		/* 添加阴影，水平偏移量0、垂直偏移量0、模糊半径10px、阴影颜色rgba(0, 0, 0, 0.2) */
		padding: 20rpx 20rpx;
	}

	.item-value {
		color: #000;
	}

	.info-content {
		flex-direction: column;
	}
</style>